<template>
	<el-container :direction="vertical" class="bg">
		<el-header height="140">
			<img src="../../images/logo.png" alt>
			<h1>盛邦升华考试后台管理系统</h1>
			<!-- Header content -->
		</el-header>
		<el-container :direction="horizontal" id="content">
			<el-container :direction="vertical" class="content-left">
				<h3>登录说明</h3>
				<p>● 账号设置：账号注册成功后即为个人使用禁止一账号多人使用</p>
				<p>● 忘记密码设置：直接对该账号密码进行重置且需要该账号拥有者的认证才能完成重设密码</p>
			</el-container>
			<el-container :direction="vertical" class="content-right">
				<h2>登录</h2>
				<el-main>
					<el-form :model="form" ref="form" label-width="80px" :inline="false" size="normal">
						<el-form-item label="用户名：">
							<el-input
								v-model="form.username"
								prefix-icon="el-icon-s-custom"
								placeholder="请输入4-12位大小写用户名"
							></el-input>
						</el-form-item>

						<el-form-item label="密码：">
							<el-input
								type="password"
								v-model="form.userpassword"
								prefix-icon="el-icon-lock"
								placeholder="请输入6-12位大小写字母"
							></el-input>
						</el-form-item>

						<el-form-item class="login-span">
							<span class="span1">注册</span>
							<span class="span2">忘记密码？</span>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" @click="onSubmit('form')" class="btn-register">马上登录</el-button>
							<router-link :to="{name:'Register'}">没有账号 请注册 -</router-link>
						</el-form-item>
					</el-form>
				</el-main>
			</el-container>
		</el-container>
		<el-footer>
			<span class="sy" prefix-icon="el-icon-bank-card">返回首页</span>
			<span class="syy">- 学好硬本领 赢在软实力 -</span>
		</el-footer>
	</el-container>
</template>

<script>
// 引入组件
export default {
	methods: {
		onSubmit() {
			// 将数据(form)放到表单对象中 因为后台接受的数据类型是表单对象
			const formData = new FormData();
			for (let key in this.form) {
				formData.append(key, this.form[key]);
			}
			// 提交数据
			this.$axios
				.post(`/system/sqUserlogin/userLogin`, formData)
				.then((res) => {
					if (res.data.code != 1) {
						alert(res.data.msg);
						return false;
					}
					alert(res.data.msg);
					// 获取用户基本信息
					const userInfo = res.data.data.userInfo;
					// 在用户中添加角色信息
					userInfo.role = res.data.data.UserRoleInfo.remark;

					this.$store.commit("userInfoMutation",userInfo);

					// 将数据转换为json格式的字符串
					const userInfoStr = JSON.stringify(res.data.data.userInfo);
					// 将用户信息存储到本地
					localStorage.setItem("userInfo", userInfoStr);

					// 登录成功跳转至首页
					this.$router.push("/");
				})
				.catch(err => {
					console.log(err);
				});
		}
	},
	data() {
		return {
			vertical: "vertical",
			horizontal: "horizontal",
			form: {
				username: "",
				userpassword: "",
			}
		};
	}
};
</script>


<style>
.bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-image: url(../../images/背景.png);
	background-position: center;
}
.el-header {
	position: relative;
	text-align: center;
}
.el-header img {
	position: absolute;
	left: 70px;
	top: 0;
}
.el-header h1 {
	text-align: center;
	line-height: 130px;
	font-size: 36px;
	color: #033887;
}

/* content 样式 */
#content {
	width: 1400px;
	margin: 10px auto 0;
	background-image: url(../../images/left.png);
	background-position: center; /* 背景图片居中显示 */
	background-size: 100% 100%; /* 图片充满容器 但是图片可能会变形 */
}

.content-left {
	flex: 0 0 700px;
	padding: 0 70px;
	justify-content: center; /* 容器内的每一项在主轴上居中显示 */
	color: white;
	line-height: 2em;
}
.content-right h2 {
	text-align: center;
	color: #033887;
	letter-spacing: 1em;
	margin-top: 30px;
}
.content-right .el-main {
	background-image: url(../../images/right_04.png);
	background-repeat: no-repeat;
	background-size: 700px 600px;
	margin-top: 43px;
	display: flex;
	flex-direction: column;
	/* 主轴方向 默认水平从左到右 */
	/* column 主轴方向从上到下*/
	justify-content: center;
	/* 主轴上的项(元素) 排列方式 居中center */
}
.btn-register {
	width: 570px;
	background-color: #033887;
	box-shadow: 5px 5px 5px #6e6e6f;
}
.el-footer .sy {
	color: #033887;
	margin-left: 230px;
	margin-top: 20px;
	font-size: 23px;
}
.el-footer .syy {
	color: #033887;
	margin-left: 1150px;
	margin-top: 20px;
	font-size: 23px;
}
.login-span .span1 {
	font-size: 16px;
}
.login-span .span2 {
	font-size: 16px;
	margin-left: 460px;
}
</style>
<style>
/* 全局样式 */
/* 图标背景及背景色 */
.el-input__prefix {
	left: 0;
	top: 0;
	width: 40px;
	background-color: #033887;
	font-size: 26px;
	border-radius: 5px;
	color: #fff;
}
/* 控制表单文字的位置 */
.el-input--prefix .el-input__inner {
	padding-left: 48px;
}
.el-form-item__label {
	color: #033887;
	font-size: 14px;
}
</style>